<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { ElNotification } from "element-plus";
import axios from "axios";
import { reactive } from "vue";
import API from "../pluging/axiosInstance.js";



const name = ref("");
const password = ref("");

const router = useRouter();
const user = [
  {
    name: name.value,
    password: password.value,
  },
];

 function onClick() {
  console.log(typeof name.value);
  if (name.value.length == 0 || password.value.length == 0) {
    ElNotification({
      message: "用户名或密码为空",
    });
  } else {
    console.log(name.value + "success");
     getData();
      
    if ( loginData.id == "error") {
      ElNotification({
        message: "用户名或密码错误",
      });
    } else {
      router.push({
        path: "/home",
        query: { id: loginData.id, name: name.value },
      });
    }
  }
  // alert(name.value);
}
const loginData = reactive({
  id: "error",
});

//测试请求方法
  function getData () {
   API({
    url: "/",
    method: "post",
    data: {
      name: name.value,
      password: password.value,
    },
  }).then((res) => {
    loginData.id = res.data.dataList[0].id;
    console.log("请求成功!" + "请求数据：" + loginData.id);

    // console.log(loginData.id)
  });
};
</script>

<template>
  <head>
    <meta charset="UTF-8" />
    <title>学生荣誉管理系统</title>
    <link href="/assets/css/login.css" rel="stylesheet" type="text/css" />
  </head>
  <div class="main">
    <div class="main_t"></div>
    <div class="main_m">
      <div class="main_bd">
        <div class="yskj step1">
          <div class="yskj_tt"><b>用户登录</b></div>
          <!-- <el-button plain @click="open2"> Warning </el-button> -->
          <!-- from表单 -->
          <div >
            <div class="yskj_bd">
              <ul class="ul">
                <li>
                  <label>账户名称：</label
                  ><input
                    id="name"
                    name="name"
                    type="text"
                    class="txt1 txt"
                    placeholder="请输入用户ID"
                    v-model="name"
                  />
                </li>
                <li>
                  <label>用户密码：</label
                  ><input
                    id="password"
                    name="password"
                    type="password"
                    class="txt1 txt"
                    v-model="password"
                  />
                </li>
              </ul>
              <div class="reg">
                <button type="submit" class="btn2" @click="onClick">
                  点击登录
                </button>
                <a th:href="@{/user/register}" class="btn3" >点击注册</a>
              </div>
            </div>
          </div>
        </div>
        <div class="main_bg opcity"></div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
